<template>
	<layout :loading="loading" pageKey="menu" :title="data._id ? '修改菜单':'新增菜单'">

		<form @submit="submit" data-action="admin/menu/save" data-back="/pages/menu/menuList" data-clear="admin/menu/list">
			
			<radios title="菜单类型" :list="menuTypeList" :value="data.type" name="x.type|菜单类型" @change="chooseMenuType"></radios>
			
			<view class="w50p">
				
				<inputs name="x.name|菜单名称" title="菜单名称" :value="data.name"></inputs>
				
				<block v-if="data.type == 1">
					<inputs v-if="data.type == 1" name="x.icon|图标" title="图标" :value="data.icon"></inputs>
					
					<inputs type="number" name="x.orderNum|排序|count|empty" title="排序" :value="data.orderNum" placeholder="选填"></inputs>
					
					<inputs type="hidden" name="x.parentId" value="0"></inputs>
					
				</block>
				<block v-else>
					
					<selects title="父级菜单" :list="parentMenuList" name="x.parentId" :value="data.parentId" titleKey="name" valueKey="_id"></selects>
					
					<textareas title="权限地址" @blur="inputBlur" name="x.url|权限地址" :value="data.url" placeholder="多个权限地址请用英文分号隔开"></textareas>
					
					<inputs name="x.pages|页面链接" title="页面链接" :value="data.pages" v-if="data.type == 2"></inputs>
					
					<inputs name="x.key|页面标识" title="页面标识" :value="data.key" v-if="data.type == 2"></inputs>
					
					<inputs type="number" name="x.orderNum|排序|count|empty" title="排序" :value="data.orderNum" placeholder="选填"></inputs>
					
					<inputs name="x.saveLogUrl|日志路径|empty" title="日志路径" :value="data.saveLogUrl" placeholder="选填"></inputs>
					
				</block>
				
				<switchs v-if="data.type != 3" name="x.isShow|是否显示" title="菜单栏显示" v-model="data.isShow" :tip="data.isShow != false?'展示在菜单栏中':'不展示在菜单栏中'"></switchs>
				
			</view>
			
			<labels class="mt40">
				<inputs type="hidden" name="x._id" :value="id" v-if="id"></inputs>
				<button class="btn greenBg w80" form-type="submit">{{ !data._id ? '保存' : '修改'}}</button>
				<button class="btn grayBg line w80 " form-type="reset">重置</button>
				<button class="btn grayBg line w80" @click="bcc.goBack()">取消</button>
			</labels>
			
		</form>

	</layout>
</template>

<script>
	export default {
		data() {
			return {
				menuTypeList:[
					{title:"一级菜单",value:1},
					{title:"二级菜单",value:2},
					{title:"操作类",value:3}
				],
				loading: true ,
				id : '' ,
				data : {
					type : 1 ,
					saveLogUrl : "",
					isShow : true 
				},
				parentMenuList : [],
				webList : [],
			}
		},
		onLoad(params) {
			this.id = params.id ;
			this.loadData();
		},
		
		methods: {
			
			inputBlur:function(e){
				var value = e.detail.value ;
				if(!!this.data.saveLogUrl || !value) return ;
				this.data.saveLogUrl = value ;
			},
			
			submit:function(e){
				this.bcc.submit(e);
			},
			
			chooseMenuType:function(e){
				var type  = e.detail.value ;
				this.data['type'] = type ;
				if(type == 1){
					return ;
				}
				this.bcc.call({
					url : "admin/menu/getParentList" ,
					data : {
						type : this.data.type - 1 
					},
					success : e => {
						this.parentMenuList = e.list ;	
					}
				});
			},
			
			loadData : function(e){
				this.bcc.call({
					url : "admin/menu/info" ,
					data : {
						id : this.id ,
						type : 1 
					},
					success : res => {
						this.parentMenuList = res.parentMenuList || [] ;	
						this.data = res.data || this.data ;
						this.loading = false ;
					}
				});
			}
		}
	}
</script>

<style>

</style>
